<template>
	<view>
		<view class="grid whiteBg" v-if="!loading">
			
			<view class="flex lt" :class="t.cname"  v-for="( t , tIndex) in listSync" :key="tIndex">
				<view class="w70 gray" style="flex-shrink: 0;">
					{{t.title}}
				</view>
				<view @tap="onTap(t.key)" class="flex w100p t" :style="{color : t.color }">
					<view>
						<color-text :text="data[t.key]"></color-text>
						<text v-if="t.key == 'stationAreas'">㎡</text>
					</view>
					<view class="sIcon-arrowRight grey" v-if="t.showMore"></view>
				</view>
			</view>
			
		</view>
		
		<view class="fixed wp" v-if="showFactor" @tap="showFactor=false">
			<view class="abs bottom safeBottom whiteBg  animated fadeInUp fastest">
				<view class="pd">
					<view class="fixAuto gray">
						<view>污染因子</view>
						<view class="w80 text-center">上限值</view>
						<view class="w80 text-center">下限值</view>
					</view>
					
					<view class="fixAuto" v-for="( item , index) in factorList" :key="index">
						<view>{{item.factor}}</view>
						<view class="w80 text-center">{{item.max}}</view>
						<view class="w80 text-center">{{item.min}}</view>
					</view>
					
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		name:"station-info",
		props:{
			sid : [String,Number]
		},
		data() {
			return {
				loading : true ,
				showFactor : false ,
				data : {},
				list :[
					{title : '企业名称' , key : 'companyName' , cname : 'w100p' , color : ''},
					{title : '点位名称' , key : 'name' , cname : '' , color : ''},
					{title : '点位类型' , key : 'type' , cname : '' , color : ''},
					{title : '级别' , key : 'controlLevel' , cname : '' , color : ''},
					{title : '行政区域' , key : 'area' , cname : '' , color : ''},
					{title : '排放去向' , key : 'dischargeDirection' , cname : '' , color : ''},
					{title : '排放方式' , key : 'emissionMode' , cname : '' , color : ''},
					{title : '站房面积' , key : 'stationAreas' , cname : '' , color : ''},
					{title : '门禁' , key : 'modeType' , cname : '' , color : ''},
					{title : '视频' , key : 'video' , cname : '' , color : ''},
					{title : '空调' , key : 'airConditioner' , cname : '' , color : ''},
					{title : '消防设施' , key : 'fireFacilities' , cname : '' , color : ''},
					{title : '照明' , key : 'light' , cname : '' , color : ''},
					{title : '温湿度计' , key : 'humidityMeter' , cname : '' , color : ''},
					{title : '防雷接地' , key : 'lightning' , cname : '' , color : ''},
					
					{title : '行业' , key : 'monitorNum' , cname : 'w100p' , color : ''},
					{title : '经纬度' , key : 'location' , cname : 'w100p' , color : ''},
					{title : '污染因子' , key : 'factors' , cname : 'w100p' , color : ''},
					{title : '排放依据' , key : 'emissionReference' , cname : 'w100p' , color : '' , showMore : true },
					{title : '备案登记' , key : 'keepRecordsDate' , cname : 'w100p' , color : '', showMore : true },
				]
			};
		},
		computed:{
			factorList(){
				if (!this.data.factorList) {
					return []
				}
				return JSON.parse(this.data.factorList);
			},
			isWater(){
				return this.data.type && (this.data.type.indexOf("废水") > -1 || this.data.type.indexOf("清下水") > -1 );
			},
			listSync(){
				if (this.isWater) {
					this.list.splice(14,0,
					{title : '混合采样' , key : 'samplingLocation' , cname : '' , color : ''},
					{title : '上下水' , key : 'plumbing' , cname : '' , color : ''})
					return this.list ;
				}
				return this.list ;
			}
		},
		mounted() {
			this.loadData();
		},
		methods:{
			loadData(){
				uni.showLoading({
					title:"加载中…"
				})
				this.loading = true ;
				var data = {
					id : this.sid 
				} ;
				this.kit.get("/api/station/info",data,res => {
					console.log("this.sid: ",this.sid);
					let data = res.data ;
					data.location = data.latitude ? `${data.latitude},${data.longitude}` : '' ;
					this.data = data ;
					this.loading = false ;
					uni.hideLoading();
				});
			},
			
			onTap(key){
				if (key == 'emissionReference') {
					this.showFactor = true ;
					return ;
				}
				if (key == 'keepRecordsDate') {
					if (!this.data.keepRecords) {
						uni.showToast({
							title: '暂无照片',
							icon : 'none'
						});
						return ;
					}
					let urls = JSON.parse(this.data.keepRecords) ;
					uni.previewImage({
						urls 
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.flex.w100p{
		width: 100%!important;
	}
</style>
